<!--
 * @Author: zhuhaohua 250293786@qq.com
 * @Date: 2024-01-02 10:21:51
 * @LastEditors: DeluxePig 250293786@qq.com
 * @LastEditTime: 2024-01-12 19:51:07
 * @FilePath: \heart-backed\src\views\banner\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-drawer
    ref="drawer"
    title="编辑"
    :before-close="cancelFun"
    :visible.sync="drawerShow"
    :size="'76%'"
    direction="rtl"
    :destroy-on-close="true"
    custom-class="demo-drawer"
  >
    <div class="demo-drawer-content">
      <el-form ref="form" :model="editData" label-width="120px">
        <el-form-item label="icon图标">
          <UpImg :url="editData.icon_url" @getImg="setIcon" />
          <el-input v-model="editData.icon_url" />
        </el-form-item>
        <el-form-item label="图片">
          <UpImg :url="editData.image_url" @getImg="setImg" />
          <el-input v-model="editData.image_url" readonly />
        </el-form-item>
        <el-form-item label="链接地址">
          <el-input v-model="editData.href" />
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="editData.title" />
        </el-form-item>
        <el-form-item label="额外参数">
          <el-input v-model="editData.other_param" />
        </el-form-item>
        <el-form-item label="权重">
          <el-input v-model="editData.weight" />
        </el-form-item>
      </el-form>
      <div class="demo-drawer-footer">
        <el-button @click="cancelFun()">取 消</el-button>
        <el-button type="primary" @click="confirmClick()">确认</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { editBanner } from '@/api/banner'
import UpImg from '@/components/upload/up-image.vue'
export default {
  components: {
    UpImg
  },
  props: {
    popShow: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function() {
        return {
          id: ''
        }
      }
    }
  },
  data() {
    return {
      // 弹出框
      drawerShow: false,
      editData: {}
    }
  },
  watch: {
    popShow(val) {
      if (val) {
        this.$nextTick(() => {
          this.showPop(this.data)
        })
      }
    }
  },
  created() {
  },
  methods: {
    showPop(data) {
      this.drawerShow = true
      this.editData = JSON.parse(JSON.stringify(data))
    },
    // 确认
    confirmClick() {
      editBanner(this.editData.id, {
        image_url: this.editData.image_url,
        href: this.editData.href,
        title: this.editData.title,
        other_param: this.editData.other_param,
        weight: this.editData.weight,
        icon_url: this.editData.icon_url
      })
        .then(() => {
          this.drawerShow = false
          this.$message({
            message: '修改成功！',
            type: 'success'
          })
          this.$emit('sure')
        })
    },
    cancelFun() {
      this.drawerShow = false
      this.$emit('cancel')
    },
    setImg(url) {
      this.editData.image_url = url
    },
    setIcon(url) {
      this.editData.icon_url = url
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep{
  .demo-drawer{
    height: 100%;
    .demo-drawer-content{
      padding:20px;
      height: calc(100vh - 85px);
      overflow-y: auto;
    }
    .demo-drawer-footer{
      text-align: right;
      margin-top:10px;
    }
  }
}
</style>
